<template>
  <div style="height: 100%; width: 100%; position: relative">
      <div class="pagetop">
          <table class="table2style" style="width: 100%; font-size: 12px" border="0">
              <col style="width: 2%" />
              <col style="width: 15%" />
              <col style="width: 10%" />
              <col style="width: 50%" />
              <tr>
                  <td style="text-align: right;width: 80px">日期区间</td>
                  <td>
                      <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>至 <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>
                  </td>
                  <td>
                      <!-- <el-checkbox true-label="1" false-label="0" v-model="ishaverptitem">仅统计仪器传输项目数>0的工作组</el-checkbox> -->
                  </td>
                  <td colspan="2" align="right">
                      <!-- <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button> -->
                      <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
                      <!-- <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport">导出</el-button> -->
                  </td>
              </tr>
          </table>
      </div>
      <div class="lis548pagecenter">
          <!-- @current-change="CurrentChangeEvent"  -->
          <vxe-table ref="lxTable" :data.sync="mainTableData" class="table2style" height="auto" border size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow show-footer :footer-method="footerMethod" @cell-dblclick="rCellDblClick">
              <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="labgroupid" title="工作组ID" width="100" align="center"></vxe-table-column>
              <vxe-table-column field="labgroupname" title="工作组名称" width="160"></vxe-table-column>
              <vxe-table-column v-if="!bismysql" field="instrid" title="仪器ID" width="60" align="center"></vxe-table-column>
              <vxe-table-column v-if="!bismysql" field="instrname" title="仪器名称" width="160"></vxe-table-column>
              <vxe-table-column field="rptcnt" title="项目开展数" width="100" header-align="center" align="right"></vxe-table-column>
              <vxe-table-column field="qccnt" title="质控开展数" width="100" header-align="center" align="right"></vxe-table-column>
              <vxe-table-column field="qcrate" title="质控开展率" width="100" header-align="center" align="right"></vxe-table-column>
          </vxe-table>
      </div>
      <el-dialog width="1100px" title="查看明细" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="bunquaildlg" :destroy-on-close="true">
          <div style="height: 500px; width: 100%">
              <div style="height: 100%">
                  <vxe-table ref="reqtable" :data.sync="unquaildata" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }" header-align="center">
                      <vxe-table-column field="rpt_itemcode" title="报告项目代码" width="110"></vxe-table-column>
                      <vxe-table-column field="rpt_itemname" title="报告项目名称" width="160"></vxe-table-column>
                      <vxe-table-column field="qcstaus" title="状态" width="110" align="center"></vxe-table-column>
                  </vxe-table>
              </div>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import rmLayoutRight from "../../../rmcompents/rm-layout-right.vue";
import XE from "xe-utils"; //引入工具类

export default {
  components: { rmLayoutRight },
  name: "LIS548",
  data() {
      return {
          sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
          sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
          ishaverptitem: "1",
          mainTableData: [],
          detailTableData: [],
          rightLoading: false,
          allrptitemcnt: 0,
          allqcitemcnt: 0,
          allqcrate: "0.00%",
          unquaildata: [],
          bunquaildlg: false,
          bismysql: true,
      };
  },
  created() {},
  mounted() {
      this.getsqlconn();
  },
  methods: {
      async getsqlconn() {
          let res = await this.$tool.request({
              url: "LIS/LIS5/LIS548",
              method: "post",
              data: {
                  action: "getsqlconn",
              },
          });
          this.bismysql = res == "1" ? true : false;
      },
      rCellDblClick({ row, column }) {
          this.unquaildata = [];
          this.selrow = row;
          if (XE.toInteger(row.rptcnt) == 0) {
              this.$message.info("请选择有效数据查询");
              return false;
          }
          this.bunquaildlg = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS548",
                  method: "post",
                  data: {
                      action: "querydetail",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      labgroupid: row.labgroupid,
                      instrid: row.instrid,
                      rpt_itemcode: row.rpt_itemcode,
                  },
              })
              .then((res) => {
                  if (res.detaildt && res.detaildt.length > 0) {
                      this.unquaildata = res.detaildt;
                  }
              })
              .catch((e) => {});
      },
      btnQuery() {
          this.mainTableData = [];
          this.detailTableData = [];
          this.allrptitemcnt = 0;
          this.allqcitemcnt = 0;
          this.allqcrate = "0.00%";
          const loading = this.$loading({
              // 声明一个loading对象
              lock: true, // 是否锁屏
              text: "正在查询报告开展数与质控开展数,请稍后.....", // 加载动画的文字
              spinner: "el-icon-loading", // 引入的loading图标
              background: "rgba(0, 0, 0, 0.3)", // 背景颜色
              target: ".sub-main", // 需要遮罩的区域
              body: true,
              customClass: "mask", // 遮罩层新增类名
          });
          setTimeout(function () {
              // 设定定时器，超时20S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
              loading.close(); // 关闭遮罩层
          }, 600000);
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS548",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "query",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      ishaverptitem: this.ishaverptitem,
                  },
              })
              .then((res) => {
                  var resdt = [];
                  if (res.showdt) resdt = res.showdt;
                  else resdt = res.dt;
                  this.mainTableData = resdt;
                  if (resdt != null && resdt.length > 0) {
                      this.allrptitemcnt = res.allrptitemcnt;
                      this.allqcitemcnt = res.allqcitemcnt;
                      this.allqcrate = res.allqcrate;
                      this.$refs.lxTable.setCurrentRow(resdt[0]);
                  } else {
                      this.$refs.lxTable.setCurrentRow(null);
                      this.detailTableData = [];
                  }
                  loading.close();
              })
              .catch((e) => {
                  this.$alert(e, "error");
                  loading.close();
              });
      },
      CurrentChangeEvent({ row, column }) {},
      BtnExport() {
          let options = {
              filename: "LIS548 内部查询-仪器原始数据查询.csv",
          };
          this.$refs.lxTable.exportCsv(options);
      },
      clearTableData() {
          this.mainTableData = [];
          this, (this.detailTableData = []);
      },
      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "统计";
                  }
                  if (["rptcnt", "qccnt", "qcrate"].includes(column.property)) {
                      if (column.property == "rptcnt") {
                          return this.allrptitemcnt;
                      }
                      if (column.property == "qccnt") {
                          return this.allqcitemcnt;
                      }
                      if (column.property == "qcrate") {
                          return this.allqcrate;
                      }
                  }
                  return null;
              }),
          ];
      },
  },
};
</script>

<style scoped>
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .vxe-table.t--border .vxe-header--column {
  border-bottom: 1px solid #cccccc;
}

.table2style tr td {
  white-space: nowrap;
}
.pagetop {
  width: 100%;
  height: 36px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  position: absolute;
  z-index: 99;
  border: 1px solid #ccc;
  text-align: left;
}
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 2px 0px 2px 0;
  border-color: #f1f1f1 #505050 #f1f1f1 #f1f1f1;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 #505050 #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 2px 0 2px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 #505050;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 #505050;
}

.cut {
  width: 20px;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  height: 28px;
  line-height: 27px;
}
.search-param {
  display: flex;
}
.search-title {
  width: 50px;
  text-align: right;
}

.lis548pagecenter {
  position: absolute;
  top: 45px;
  width: 100%;
  left: 0;
  bottom: 5px;
}
.search-param_text {
  margin-left: 5px;
}
.search-param .el-input {
  width: 120px;
}
.search-param .el-input--small .el-input__inner {
  height: 26px !important;
  line-height: 26px !important;
}
.search-btn {
  float: right;
  /*margin: 5px 5px 0 0;*/
  margin-left: 95px;
  text-align: right;
}
.page-bottom {
  margin-top: 108px;
  position: absolute;
  font-size: 12px;
  width: 100%;
  height: calc(100% - 108px);
}
</style>